<template>
  <div class="pt-6 h-screen px-2 bg-neutral-200 flex flex-col">
    <!-- 工作 -->
    <Works :access="access"></Works>
    <!-- 打卡排行榜 -->
    <ClockInUserList :items="userList" :next="handleNextPage" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, toRefs } from "vue";
import accessService from "@/api/accessService";
import ClockInUserList from "@/components/HomePage/ClockInUserList.vue";
import Works from "@/components/HomePage/Works.vue";
import { useClockInUserStore } from "@/stores/clockInUserStore";

const clockInUserStore = useClockInUserStore();

let access = ref([]);
const currentPage = ref(1);

onMounted(() => {
  // 后端返回用户有权限使用的功能列表
  accessService.getAccess().then((res) => {
    if (res.code != 200) {
      return;
    }
    access.value = JSON.parse(res.data);
  });
  // 获取数据
  clockInUserStore.getUserlList(1, 6);
});

// 下一页函数
const handleNextPage = async (setHasMore: (value: boolean) => void) => {
  currentPage.value++;
  const res = await clockInUserStore.getUserlList(currentPage.value, 6);
  if (!res.hasMore) {
    setHasMore(false);
  }
};

const { userList } = toRefs(clockInUserStore);
</script>
